<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会


常用的生命周期钩了:
    1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
    2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]。
关于销毁Vue实例
    1.销毁后借助Vue开发者工具看不到任何信息。
    2.销毁后自定义事件会失效，但原生DOM事件依然有效
    3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
-->
<div id="app">
    <p>当前的n值{{n}}</p>
    <button @click="n++">+1</button>
    <button @click="$destroy()">销毁vm</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {n: 1},
        beforeCreate() {
            console.log(" beforeCreate")
        },
        created() {
            console.log("created")
        },
        beforeMount() {
            console.log("beforeMount")
        },
        mounted() {
            console.log("mounted")
        },
        beforeUpdate() {
            console.log("beforeUpdate")
        },
        updated() {
            console.log("updated")
        },
        beforeDestroy() {
            console.log("beforeDestroy")
        },
        destroyed() {
            console.log("destroyed")
        }
    })
</script>
</body>
</html>
